<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始vue</title>
</head>
<script src="../js/vue.js"></script>

<body>

    <!-- 
			MVVM模型
						1. M：模型(Model) ：data中的数据
						2. V：视图(View) ：模板代码
						3. VM：视图模型(ViewModel)：Vue实例
			观察发现：
						1.data中所有的属性，最后都出现在了vm身上。
						2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
		-->
    <div id="contain">
        <h1>学校名字{{name}}</h1> <!--- 插值语法 -->

        <h1>学校地址{{address}}</h1>
    </div>


    <script>

        // Vue.config.productionTip = false;//设置为 false 以阻止 vue 在启动时生成生产提示。

        //实例Vue
        const vm = new Vue({
            el: '#contain',         //用于指定当前Vue实例为哪个元素服务,值通常为css选择器字符 //el:document.getElementById('contain');
            data: {
                //data存了数据,但数据只供el容器里面的元素使用
                name: '高要一中',
                address: '府前大街一号'
            }
        });

        console.log(vm);

    </script>
</body>

</html>